import { EllipsisOutlined } from '@ant-design/icons';
import { DropDownProps, Dropdown, MenuProps } from 'antd';
import { useCallback } from 'react';
import { useStyles } from './style';

export interface YmMoreMenuProps extends Omit<DropDownProps, 'menu'> {
  /**
   * @desc 菜单选项配置
   */
  items?: MenuProps['items'];
  /**
   * @desc 菜单点击事件
   */
  onClick?: MenuProps['onClick'];
  /**
   * @desc 是否阻止图标点击的时候冒泡
   * @default true
   */
  stopPropagation?: boolean;
}

export function YmMoreMenu({
  trigger = ['hover'],
  stopPropagation = true,
  openClassName,
  items,
  onClick: onMenuClick,
  placement,
  overlayStyle,
  ...props
}: YmMoreMenuProps) {
  const cssStyle = useStyles();
  const onClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(
    (e) => {
      if (stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
      }
    },
    [stopPropagation],
  );

  return (
    <Dropdown
      openClassName={cssStyle.cx('open', openClassName)}
      mouseLeaveDelay={0.1}
      trigger={trigger}
      menu={{
        items,
        onClick: onMenuClick,
      }}
      overlayStyle={{
        whiteSpace: 'nowrap',
        position: 'fixed',
        ...overlayStyle,
      }}
      getPopupContainer={(e) => {
        return e;
      }}
      autoAdjustOverflow={false}
      placement={placement}
      {...props}
    >
      <EllipsisOutlined
        className={cssStyle.cx([
          'ym-more-menu_trigger',
          cssStyle.styles.container,
        ])}
        onClick={onClick}
      />
    </Dropdown>
  );
}
